<template>
  <div>
  <el-form  :label-position="labelPosition" ref="form" :model="form" label-width="100px" v-model="labelPosition">
    <h4 style="opacity:0.4" align="center">隔离人员分配</h4>
    <el-form-item label="姓名:" placeholder="请输人员姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
      <el-form-item label="用户名:" placeholder="请输入用户名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
    <el-form-item label="身份证:" placeholder="请输入身份证号码">
      <el-input v-model="form.identity"></el-input>
    </el-form-item>
    <el-form-item label="手机号:" placeholder="请输入手机号">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item label="电子邮箱:" placeholder="请输入电子邮箱">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="隔离类型:">
      <el-select v-model="form.isolationType" placeholder="请选择">
        <el-option label="密接" value="mijie"></el-option>
        <el-option label="应隔尽隔离人员" value="yinggelijingelirenyuan"></el-option>
        <el-option label="入境人员" value="rujingrenyuan"></el-option>
        <el-option label="中高风险地区" value="zhonggaofengxiandiqu"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="隔离时间:">
      <div class="block">
        <el-date-picker
            v-model="form.data1"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
      </div>
    </el-form-item>
    <el-form-item label="解除隔离时间:" >
      <div class="block">
        <el-date-picker
            v-model="form.data2"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
      </div>
    </el-form-item>
    <el-form-item label="酒店:">
      <el-select v-model="form.hotel" placeholder="请选择">
        <el-option label="OneOneTwo国际度假酒店" value="OneOneTwo"></el-option>
        <el-option label="SixOneFour国际度假酒店" value="SixOneFour"></el-option>
        <el-option label="如家酒店" value="rujia"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="隔离类型:">
      <el-select v-model="form.roomType" placeholder="请选择">
        <el-option label="" value="无数据"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="人员省份:">
    <div id="app">
      <el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange">
      </el-cascader>
    </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>


<script type="text/javascript">
import { provinceAndCityData,CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      labelPosition: 'left',
      options: provinceAndCityData,
      selectedOptions: [],
      form: {
        name: '',
        region: '',
        username:'',
        identity:'',
        phone:'',
        email:'',
        isolationType:'',
        date1: '',
        date2: '',
        hotel:'',
        roomType:'',
      }
    }
  },
  methods: {
    handleChange () {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      console.log(loc)//打印区域码所对应的属性值即中文地址
    },
    onSubmit() {
      console.log('submit!');
    }
  }
}
</script>

<style scoped>

</style>